<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>XXX公司心理健康管理</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" href="../css/reset.css" />
<link rel="stylesheet" href="../css/common.css" />
<link rel="stylesheet" href="../css/page-common.css" />
<link rel="stylesheet" href="../css/Smoke520Theme/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" href="../css/gantt.css" />
</head>
<body>
<div id="page">
    <div id="header">
        <img class="logo" src="../img/logo.png" alt="logo" width="170" height="40" />
        <div id="login-bar">
            <a href="#">注销</a> | <a href="#">退出</a>
        </div>
    </div>
    <div class="info-bar">
        <span>2013/07/10(星期日)</span><span>xx公司xx组</span><span>张三</span><span>男</span><span>1980年09月20日出生</span>
    </div>
    
  <div id="nav"> 
    <ul id="nav-main" class="util-clearfix">
      <li class="first"><a href="home.html">首页</a></li>
      <li><a href="#" url-data="#nav8">在线咨询</a></li>
      <li><a href="#" url-data="#nav4">问卷吧</a></li>
      <li><a href="#" url-data="#nav7">进度计划</a></li>
      <li><a href="#" url-data="#nav5">对策查看</a></li>
      <li><a href="#" url-data="#nav3">考试吧</a></li>
      <li><a href="#" url-data="#nav6">报表</a></li>
      <li><a href="myInfo.html">我的信息</a></li>
	  <li><a href="suggestion.html">建议</a></li>
      <li><a href="#" url-data="#nav1">系统管理</a></li>
      <li><a href="#">游戏</a></li>
    </ul>
    <div class="nav-sub util-clearfix"> 
      <div class="nav-sub-body" id="nav7"><a href="mySchedule.html">个人进度计划</a> 
        | <a href="companySchedule.html">公司进度计划</a></div>
      <div class="nav-sub-body" id="nav3"><a href="examStatistics.html">试卷统计</a> 
        | <a href="examType.html">考试类型</a> | <a href="questionType.html">考试题型</a> 
        | <a href="managePaper.html">试卷管理</a> | <a href="manageQuestion.html">试题管理</a> 
        | <a href="examFull.html">考试</a></div>
      <div class="nav-sub-body" id="nav4"><a href="questionnaireList.html">问卷列表</a> 
        | <a href="countQuestionnaire.html">问卷统计</a></div>
      <div class="nav-sub-body" id="nav5"><a href="countermeasureCom.html">本公司</a> 
        | <a href="countermeasureCP.html">公司-个人</a></div>
      <div class="nav-sub-body" id="nav8"><a href="consultation.html">个人咨询</a> 
        | <a href="setTime.html">设置预约时间</a> | <a href="checkAppointment.html">查看预约</a> 
        | <a href="reply.html">回复咨询</a></div>
      <div class="nav-sub-body" id="nav1"><a href="importPeople.html">名单导入</a></div>
      <div class="nav-sub-body" id="nav6"><a href="#">报表1</a> | <a href="#">报表2</a> 
        | <a href="#">报表3</a> | <a href="#">报表4</a></div>
    </div>
  </div>
    <div id="content" class="util-clearfix">
        <div id="main-bar">
            <div class="main-bar-title">我的量表 (5)</div>
            <div class="main-bar-body">
                <ul>
				 
          <li><a href="#">量表1</a><strong class="stat-icon1">已完成</strong></li>
				  
          <li><a href="examFull.html">量表2</a><strong class="stat-icon2">进行中</strong></li>
				  
          <li><a href="examFull.html">量表3</a><strong class="stat-icon2">进行中</strong></li>
				  
          <li><a href="examFull.html">量表4</a><strong class="stat-icon2">进行中</strong></li>
				  
          <li><a href="#">量表5</a><strong class="stat-icon3">未开始</strong></li>
                </ul>
            </div>
            <h3 class="main-bar-title">我的报告 (4)</h3>
            <div class="main-bar-body">
                <ul>
				  
          <li><a href="mySummaryReport.html">综合报告</a><strong class="stat-icon1">综合</strong></li>
				  
          <li><a href="myReport.html">个人报告1</a><strong class="stat-icon2">个人</strong></li>
				  
          <li><a href="myReport.html">个人报告2</a><strong class="stat-icon2">个人</strong></li>
				  
          <li><a href="myReport.html">个人报告3</a><strong class="stat-icon2">个人</strong></li>
                </ul>
            </div>
            <h3 class="main-bar-title">公司/部门报告 (1)</h3>
            <div class="main-bar-body">
                <ul>
				  
          <li><a href="companyReport.html">报告1</a><strong class="stat-icon1">已完成</strong></li>
                </ul>
            </div>
			<h3 class="main-bar-title">我的问卷 (5)</h3>
            <div class="main-bar-body">
                <ul>
				  
          <li><a href="#">问卷1</a><strong class="stat-icon1">已完成</strong></li>
				  
          <li><a href="myQuestionnaire.html">问卷2</a><strong class="stat-icon3">未开始</strong></li>
				  
          <li><a href="myQuestionnaire.html">问卷3</a><strong class="stat-icon3">未开始</strong></li>
				  
          <li><a href="myQuestionnaire.html">问卷4</a><strong class="stat-icon3">未开始</strong></li>
				  
          <li><a href="myQuestionnaire.html">问卷5</a><strong class="stat-icon3">未开始</strong></li>
        </ul>
      </div>
    </div>
    <div id="main"> 
      <div class="report-box"> 
        <div class="report-box-title util-clearfix"> 
          <div class="title-text">公司进度</div>
        </div>
        <div class="report-box-body report-box-body-style">
                <ul class="tab-titles util-clearfix">
                  <li class="active-tab"><a href="#tabs-1">按量表</a></li>
                  <li><a href="#tabs-2">按员工</a></li>
                </ul>
                <div class="tab-contents" id="tabs-1"> 
                  <div class="top-table"> 
                    <table>
                      <tr> 
                        <th width="50px">序号</th>
                        <th>量表名称</th>
                        <th>完成度</th>
                        <th>测评人数</th>
                        <th>完成人数</th>
                        <th>未完成人数</th>
                      </tr>
                      <tr> 
                        <td>1</td>
                        <td><a href="#" id="table-btn">量表1</a></td>
                        <td>59/100</td>
                        <td>10</td>
                        <td>8</td>
                        <td>2</td>
                      </tr>
                    </table>
                  </div>
                </div>
                <div class="tab-contents" id="tabs-2" style="display:none"> 
                  <div class="top-table"> 
                    <table>
                      <tr> 
                        <th width="50px">序号</th>
                        <th>姓名</th>
                        <th>完成度</th>
                        <th>应测量表数</th>
                        <th>完成量表数</th>
                        <th>未完成量表数</th>
                      </tr>
                      <tr> 
                        <td>1</td>
                        <td><a href="#" id="people-btn">李四</a></td>
                        <td>40%</td>
                        <td>10</td>
                        <td>4</td>
                        <td>6</td>
                      </tr>
                    </table>
                  </div>
                </div>
				<br>
				<div class="gantt"></div>
              </div>
			  
            </div>
			
    </div> 	
  </div>
  <div id="footer">Copyright &copy; 2007-2012 XXXXX Group Co.Ltd All Rights Reserved</div>
</div>

<div id="table-dialog" class="open-dialog" style="display:none">
    <table width="100%">
        <tr>
            <td>
				<div class="top-table">
				  <table width="100%">
					<thead>
					  <tr> 
						<td width="40px">序号</td>
						<td>姓名</td>
						<td>状态</td>
					  </tr>
					</thead>
					<tr> 
					  <td>1</td>
					  <td>李四</td>
              		  <td><font color="#FF0000"><strong>未完成</strong></font></td>
					</tr>
					<tr> 
					  <td>2</td>
					  <td>王五</td>
                      <td><font color="#00CC00"><strong>已完成</strong></font></td>
					</tr>
				  </table>
				</div>
			</td>
        </tr>
    </table>        
</div>
<div id="people-dialog" class="open-dialog" style="display:none">
    <table width="100%">
        <tr>
            <td>
				<div class="top-table">
				  <table width="100%">
					<thead>
					  <tr> 
						<td width="40px">序号</td>
						<td>量表名称</td>
						<td>状态</td>
					  </tr>
					</thead>
					<tr> 
					  <td>1</td>
					  <td>量表A</td>
					  <td><font color="#FF0000"><strong>未完成</strong></font></td>
					</tr>
					<tr> 
					  <td>2</td>
					  <td>量表B</td>
					  <td><font color="#00CC00"><strong>已完成</strong></font></td>
					</tr>
				  </table>
				</div>
			</td>
        </tr>
    </table>    
</div>

<script src="../js/jquery-1.7.min.js"></script>
<script src="../js/nav.js"></script>
<script src="../js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="../js/gantt.js"></script>
<script>

    //转换规则 (new Date('2013/06/10')).getTime()
    $(function() {
        $(".gantt").gantt({
            source: [{
                name: "量表1",
                desc: "已结束,5%人未完成",
                values: [{
                    id: "t01",
                    from: "/Date(1371657600000)/",
                    to: "/Date(1372780800000)/",
                    label: "已结束，5%人未完成", 
                    customClass: "gantt1",
                    dep: "t01"
                }]
            },{
                name: "量表2",
                desc: "进行中,90%人已完成",
                values: [{
                    id: "t02",
                    from: "/Date(1373212800000)/",
                    to: "/Date(1375113600000)/",
                    label: "进行中,90%人已完成", 
                    customClass: "gantt4",
                    dep: "t01"
                }]
            },{
                name: "量表3",
                desc: "进行中,82%人已完成",
                values: [{
                    id: "t03",
                    from: "/Date(1373558400000)/",
                    to: "/Date(1375113600000)/",
                    label: "进行中,82%人已完成", 
                    customClass: "gantt4",
                    dep: "t03"
                }]
            },{
                name: "量表4",
                desc: "进行中,95%人已完成",
                values: [{
                    id: "t04",
                    from: "/Date(1373040000000)/",
                    to: "/Date(1375113600000)/",
                    label: "进行中,95%人已完成", 
                    customClass: "gantt4",
                    dep: "t04"
                }]
            },{
                name: "量表5",
                desc: "已结束,3%人未完成",
                values: [{
                    id: "t05",
                    from: "/Date(1372867200000)/",
                    to: "/Date(1373385600000)/",
                    label: "已结束，10%人未完成", 
                    customClass: "gantt1",
                    dep: "t05"
                }]
            }],
            navigate: "scroll",
            scale: "days",
            maxScale: "months",
            minScale: "days",
            itemsPerPage: 10,
            months:["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            onItemClick: function(data) {
            },
            onAddClick: function(dt, rowId) {
            },
            onRender: function() {
            }
        });
    });

</script>
<script>
    $(function(){
        $('.tab-titles li').click(function(){
            $('.tab-titles li').removeClass('active-tab');
            $(this).addClass('active-tab');
            var target = $(this).find('a').attr('href');
            $('.tab-contents').hide();
            $(target).show();
            return false;
        });

        $(".datepicker").datepicker();

        $("#table-dialog").dialog({
            autoOpen: false,
            width: 400,
            title: '量表A完成详细程度（59/100）',
            modal: true,
            buttons:{
                '关闭':function(){
                    $(this).dialog('close');
                }
            }
        });

        $("#people-dialog").dialog({
            autoOpen: false,
            width: 400,
            title: '李四完成详细程度（40%）',
            modal: true,
            buttons:{
                '关闭':function(){
                    $(this).dialog('close');
                }
            }
        });
        
        $('#table-btn').click(function(){
            $("#table-dialog").dialog('open');           
        });

        $('#people-btn').click(function(){
            $("#people-dialog").dialog('open');
            
        });
    });
</script>
<script>
    $(function(){
        $("#main-bar").accordion();

	    $('#round').roundabout(); 
    })
</script>
</body>
</html>